<template>
  <div class="creators">
    <!-- 内容 -->
    <div class="contentBox">
      <!-- 移动图片 -->
      <div class="imgsBox">
        <div class="imgsItem imgsItem1">
          <div class="itemBox move1">
            <div
              class="itemImgBox"
              v-for="(item, index) in imgsItem1Data"
              :key="index"
            >
              <img :src="item.img" class="imgStyle" alt="" />
            </div>
          </div>
          <div class="itemBox2 move12">
            <div
              class="itemImgBox"
              v-for="(item, index) in imgsItem1Data"
              :key="index"
            >
              <img :src="item.img" class="imgStyle" alt="" />
            </div>
          </div>
        </div>
        <div class="imgsItem imgsItem2">
          <div class="itemBox move2">
            <div
              class="itemImgBox"
              v-for="(item, index) in imgsItem2Data"
              :key="index"
            >
              <img :src="item.img" class="imgStyle" alt="" />
            </div>
          </div>
          <div class="itemBox2 move22">
            <div
              class="itemImgBox"
              v-for="(item, index) in imgsItem2Data"
              :key="index"
            >
              <img :src="item.img" class="imgStyle" alt="" />
            </div>
          </div>
        </div>
        <div class="imgsItem imgsItem3">
          <div class="itemBox move3">
            <div
              class="itemImgBox"
              v-for="(item, index) in imgsItem3Data"
              :key="index"
            >
              <img :src="item.img" class="imgStyle" alt="" />
            </div>
          </div>
          <div class="itemBox2 move32">
            <div
              class="itemImgBox"
              v-for="(item, index) in imgsItem3Data"
              :key="index"
            >
              <img :src="item.img" class="imgStyle" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 申请 -->
      <div class="applyBox">
        <!-- 固定中间的盒子 -->
        <div class="fixedItem">
          <div class="fixedBox">
            <div class="textDesc">
              <h1 class="fixedTitle">天空之城创作人征集计划</h1>
              <div class="fixedText">
                你是否已经成为天空之城用户多年，并拍摄了许多精彩的航拍作品？
                你是否对大疆产品如数家珍？
                你是否对自己的摄影技术自信满满，并迫不及待想要分享创作心得？
                现在，申请成为天空之城创作人，让作品获得更多展示机会，才华被“圈内”认可！
              </div>
            </div>
            <div class="applyBtn">
              <router-link to="/creators/applyNow">
                <el-button type="primary" class="applayBtnText" round
                  >立即申请</el-button
                >
              </router-link>
            </div>
          </div>
        </div>
        <div class="content1Box">
          <div class="getBox">
            <h1>你可以获得</h1>
          </div>
          <div class="getDescBox">
            <div class="getDescLeft getDesc">
              <h2 class="lfetTitle">身份认证，进入官方合作绿色通道</h2>
              <p>特殊身份标识</p>
              <p>属任务页面查看权限</p>
              <p>提前获知各类活动信息</p>
              <p>DJI 大疆创新新品优先测评/使用机会</p>
            </div>
            <div class="getDescRight getDesc">
              <img
                src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/auth-module.1c17237d.png"
                alt=""
                class="getImg"
              />
            </div>
          </div>
          <div class="getDescBox">
            <div class="getDescRight getDesc">
              <img
                src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/explore-module.d1d3eeea.png"
                alt=""
                class="getImg"
              />
            </div>
            <div class="getDescLeft getDesc">
              <h2 class="lfetTitle">多重曝光渠道，作品得到优先展示</h2>
              <p>DJI 大疆创新各平台推广资源倾斜</p>
              <p>DJI 大疆创新相关社交媒体及博客约稿机会</p>
            </div>
          </div>
          <div class="getDescBox">
            <div class="getDescLeft getDesc">
              <h2 class="lfetTitle">独有优惠，专项特殊产品折扣</h2>
              <p>DJI 大疆创新线下旗舰店分享场地</p>
              <p>不定期获得大疆官方商城指定产品优惠券</p>
            </div>
            <div class="getDescRight getDesc">
              <img
                src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/sale-module.bf202247.png"
                alt=""
                class="getImg"
              />
            </div>
          </div>
        </div>
        <div class="content2Box">
          <div class="becomeBox">
            <h1 class="becomeTitle">如何成为天空之城摄影师</h1>
            <div class="becomeItems">
              <div
                class="becomeItemBox"
                v-for="(item, index) in becomeStepData"
                :key="index"
              >
                <div class="becomeImg">
                  <img :src="item.img" alt="" class="becomeImgStyle" />
                </div>
                <p class="step padding">步骤{{ item.id }}</p>
                <p class="stepName padding">{{ item.name }}</p>
                <p class="stepDesc padding">{{ item.desc }}</p>
              </div>
            </div>
            <div class="becomeBtn">
              <router-link to="/creators/applyNow">
                <el-button type="primary" class="becomeBtnText" round
                  >立即申请</el-button
                >
              </router-link>
            </div>
          </div>
        </div>
        <div class="content3Box">
          <div class="becomeItemBox">
            <div class="becomeImg">
              <img
                src="https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/contact-us.033d24cf.svg"
                alt=""
                class="contactImgStyle"
              />
            </div>
            <p class="contactTitle padding">联系我们</p>
            <p class="contactDesc padding">如有问题，请联系</p>
            <p class="contact padding">skypixel.contact@dji.com ></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Nav from "../../components/Nav.vue";
export default {
  components: {},
  props: {},
  data() {
    return {
      imgsItem1Data: [],
      imgsItem2Data: [],
      imgsItem3Data: [],
      // 如何成为摄影师的申请步骤
      becomeStepData: [
        {
          id: 1,
          name: "提交申请",
          desc: "在天空之城网页端填写申请表",
          img: "https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/submit-application.b14231d3.svg",
        },
        {
          id: 2,
          name: "人工审核",
          desc: "天空之城组委会进行资料审核",
          img: "https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/artificial-audit.f7d669b4.svg",
        },
        {
          id: 3,
          name: "通过审核",
          desc: "资料审核通过",
          img: "https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/approved.24b58a6f.svg",
        },
        {
          id: 4,
          name: "签署合约",
          desc: "天空之城专人联系签约",
          img: "https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/sign-contract.fe20cef4.svg",
        },
        {
          id: 5,
          name: "完成认证",
          desc: "签约完成正式获得认证",
          img: "https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/complete.55220e5d.svg",
        },
        {
          id: 6,
          name: "开始任务",
          desc: "完成每月任务及不定期的专属任务",
          img: "https://spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/start-tasks.7c089db9.svg",
        },
      ],
      timer1: null,
      timer2: null,
      timer3: null,
    };
  },
  watch: {},
  computed: {},
  mounted() {
    window.scrollTo(0, 0);
    this.init();
  },
  methods: {
    init() {
      this.getImgsItemData();
      this.MonitorMove1();
      this.MonitorMove2();
      this.MonitorMove3();
    },
    // 获取数据
    getImgsItemData() {
      this.$axios.post("/api/imgsData").then((res) => {
        let { data } = res;
        let imgsItem1Data = [];
        let imgsItem2Data = [];
        let imgsItem3Data = [];
        data.forEach((el, index) => {
          if (el.item == 1) {
            //&& index < 3
            imgsItem1Data.push(el);
          }
          if (el.item == 2) {
            imgsItem2Data.push(el);
          }
          if (el.item == 3) {
            imgsItem3Data.push(el);
          }
        });
        this.imgsItem1Data = imgsItem1Data;
        this.imgsItem2Data = imgsItem2Data;
        this.imgsItem3Data = imgsItem3Data;
      });
    },
    // 监听移动
    MonitorMove1() {
      let move1 = document.querySelector(".move1");
      let move12 = document.querySelector(".move12");
      if (move1 && move12) {
        let newMove1 = window.getComputedStyle(move1);
        let newMove2 = window.getComputedStyle(move12);
        let newMove1Left = Number(parseInt(newMove1.left)) - 1; // + "px";
        let newMove2Left = Number(parseInt(newMove2.left)) - 1; //+ "px";
        if (newMove1Left < -3082) {
          move1.style.left = 3082 + "px";
        } else {
          move1.style.left = newMove1Left + "px";
        }
        if (newMove2Left < -3082) {
          move12.style.left = 3082 + "px";
        } else {
          move12.style.left = newMove2Left + "px";
        }
        let timer1 = setInterval(() => {
          this.MonitorMove1();
          this.timer1 = timer1;
          clearInterval(this.timer1);
        }, 150); //120
      }
    },
    MonitorMove2() {
      let move2 = document.querySelector(".move2");
      let move22 = document.querySelector(".move22");
      if (move2 && move22) {
        let newMove1 = window.getComputedStyle(move2);
        let newMove2 = window.getComputedStyle(move22);
        let newMove1Left = Number(parseInt(newMove1.left)) + 1; // + "px";
        let newMove2Left = Number(parseInt(newMove2.left)) + 1; //+ "px";
        if (newMove1Left > 4180) {
          move2.style.left = -4180 + "px";
        } else {
          move2.style.left = newMove1Left + "px";
        }
        if (newMove2Left > 4180) {
          move22.style.left = -4180 + "px";
        } else {
          move22.style.left = newMove2Left + "px";
        }
        let timer2 = setInterval(() => {
          this.MonitorMove2();
          this.timer2 = timer2;
          clearInterval(this.timer2);
        }, 150);
      }
    },
    MonitorMove3() {
      let move3 = document.querySelector(".move3");
      let move32 = document.querySelector(".move32");
      if (move3 && move32) {
        let newMove1 = window.getComputedStyle(move3);
        let newMove2 = window.getComputedStyle(move32);
        let newMove1Left = Number(parseInt(newMove1.left)) - 1; // + "px";
        let newMove2Left = Number(parseInt(newMove2.left)) - 1; //+ "px";
        if (newMove1Left < -3062) {
          move3.style.left = -3062 + "px";
        } else {
          move3.style.left = newMove1Left + "px";
        }
        if (newMove2Left < -3062) {
          move32.style.left = -3062 + "px";
        } else {
          move32.style.left = newMove2Left + "px";
        }
        let timer3 = setInterval(() => {
          this.MonitorMove3();
          this.timer3 = timer3;
          clearInterval(timer3);
        }, 150);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.contentBox {
  margin-top: 50px;
  .imgsItem {
    width: 100%;
    height: 272px;
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    position: relative;
  }
  .itemBox,
  .itemBox2 {
    display: flex;
  }
  .itemImgBox {
    margin-right: 10px;
  }
  .imgStyle {
    height: 272px;
  }
  .move1 {
    // transform: scale(0, 0);
    position: absolute;
    left: 0;
    top: 0;
  }
  .move12 {
    // transform: scale(3082, 0);
    position: absolute;
    left: 3082px;
    top: 0;
  }
  .move2 {
    position: absolute;
    left: -4180px;
    top: 0;
  }
  .move22 {
    position: absolute;
    left: 0;
    top: 0;
    // border: 1px solid red;
  }
  .move3 {
    position: absolute;
    left: 0px;
    top: 0;
  }
  .move32 {
    position: absolute;
    left: 3062px;
    top: 0;
    // border: 1px solid red;
  }
  .applyBox {
    .fixedItem {
      height: 120px;
      position: relative;
      .fixedBox {
        position: absolute;
        left: 19%;
        top: -420px;
        width: 960px;
        height: 544px;
        z-index: 10;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding-top: 110px;
        box-sizing: border-box;
        .textDesc {
          width: 592px;
          height: 224px;
          margin: 0 auto;
          text-align: center;
          color: #2c3e50;
        }
        .fixedTitle {
          font-size: 40px;
        }
        .fixedText {
          margin-top: 10px;
          font-size: 18px;
        }
        .applyBtn {
          text-align: center;
        }
        .applayBtnText {
          font-size: 16px;
          padding: 12px 38px;
        }
      }
    }
    .content1Box {
      padding-top: 100px;
      padding-bottom: 100px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.09);
      .getBox {
        width: 693px;
        height: 44px;
        margin: 0 auto;
        text-align: center;
        line-height: 44px;
        font-size: 20px;
      }
      .getDescBox {
        margin: 0 auto;
        width: 960px;
        display: flex;
      }
      .getDesc {
        width: 480px;
        height: 360px;
        // border: 1px solid red;
        box-sizing: border-box;
      }
      .getDescLeft {
        text-align: left;
        padding-top: 100px;
        color: #666666;
      }
      .getDescRight {
        padding-top: 30px;
      }
      .lfetTitle {
        font-size: 31px;
        color: #262626;
        margin-bottom: 10px;
      }
      .getImg {
        width: 514px;
        height: 339px;
      }
    }
  }
  .content2Box {
    padding: 100px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    .becomeImgStyle {
      width: 48px;
      height: 48px;
    }

    .becomeItems {
      display: flex;
      flex-wrap: wrap;
      margin: 50px 0;
    }
    .becomeBox {
      width: 960px;
      margin: 0 auto;
    }
    .becomeItemBox {
      width: 300px;
      padding: 0 9px;
      padding-bottom: 20px;
      // border: 1px solid red;
      .step {
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
      }
      .stepName {
        font-size: 18px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
      }
      .stepDesc {
        color: rgba(0, 0, 0, 0.65);
      }
      .padding {
        padding-bottom: 5px;
      }
      .becomeBtn {
        margin: 0 auto;
      }
      .becomeBtnText {
        padding: 12px 38px;
      }
    }
  }
  .content3Box {
    padding: 60px 0;
    .contactImgStyle {
      width: 64px;
      height: 64px;
    }
    .contactTitle {
      font-size: 20px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
    }
    .contactDesc {
      color: rgba(0, 0, 0, 0.65);
    }
    .padding {
      padding-bottom: 10px;
    }
  }
}
</style>
